<template>
  <div class="col main-content-edit mt-15">
    <el-card>
      <div slot="header" class="clearfix">
        <h5>{{title}}</h5>
      </div>
      <el-form :model="brand" :rules="rules" labelPosition="top" ref="form" class="custom-form">
        <el-form-item label="品牌名称：" prop="name">
          <el-row :gutter="30">
            <el-col :span="9">
              <el-input v-model="brand.name" clearable placeholder="请输入品牌名称"></el-input>
            </el-col>
            <el-col :span="15">
              <span>请填写品牌名称</span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="品牌logo:">
          <el-row :gutter="30">
            <el-col :span="9">
              <el-row :guuter="20">
                <el-col :span="24">
                  <h-upload :files="brand.files" :single="true" owner="brand">
                    <el-button type="primary">选择图片</el-button>
                  </h-upload>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="15">
              <span>请上传品牌LOGO，用于前台展示。</span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="品牌网址:">
          <el-row :gutter="30">
            <el-col :span="9">
              <el-input v-model="brand.url" clearable placeholder="请输入品牌网址"></el-input>
            </el-col>
            <el-col :span="15">
              <span>请填写品牌网址，以http://或https://开头。</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="品牌排序:">
          <el-row :gutter="30">
            <el-col :span="9">
              <el-input v-model="brand.sort" clearable placeholder="请输入序号"></el-input>
            </el-col>
            <el-col :span="15">
              <span>请填写自然数。品牌列表将会根据排序进行由大到小排列显示。</span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="商品属性:">
          <el-row :gutter="30">
            <el-col :span="9">
              <el-checkbox v-model="recommendCheck">是否推荐</el-checkbox>
              <el-checkbox v-model="hotCheck">是否热门</el-checkbox>
            </el-col>
            <el-col :span="15">
              <span>请设置品牌的属性。</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="品牌描述:">
          <el-row :gutter="30">
            <el-col :span="9">
              <el-input v-model="brand.descript" clearable type="textarea" :rows="4"></el-input>
            </el-col>
            <el-col :span="15">
              <span>对品牌进行简单的描述</span>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <div class="row">
        <div class="col" v-if="model==1">
          <el-button type="primary" @click="submitAndClose"><i class="fa fa-plus"/> 添加品牌</el-button>
          <!-- el-button type="primary" @click="submitAndMore">创建并继续</el-button -->
          <el-button @click="goback" type="success"><i class="fa fa-sign-out"/> 返回</el-button>
        </div>
        <div v-else class="col">
          <el-button type="primary" @click="submitAndClose"><i class="fa fa-save"/> 保存编辑</el-button>
          <el-button @click="goback" type="success"><i class="fa fa-sign-out"/> 返回</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import HUpload from 'src/components/common/HUpload'
  import AdminService from 'src/service/admin'

  export default {
    name: 'AdminCreateBrand',
    components: {HUpload},
    data() {
      return {
        title: '添加品牌',
        brand: {
          name: '',
          logo: '',
          descript: '',
          isShow: 1,
          sort: 100,
          url: '',
          isRecommend: 0,
          isHot: 0,
          files: []
        },
        rules: {
          name: [
            {required: true, message: '请输入品牌名称', trigger: 'blur'}]
        },
        model: 1     //1是添加 2是编辑
      }
    },
    computed: {
      recommendCheck: {
        get: function () {
          if (this.brand != null) {
            return this.brand.isRecommend === 1;
          }
          return false;
        },
        set: function (newValue) {
          this.brand.isRecommend = newValue ? 1 : 0;
        }

      },
      hotCheck: {
        get: function () {
          if (this.brand != null) {
            return this.brand.isHot === 1;
          }
          return false;
        },
        set: function (newValue) {
          this.brand.isHot = newValue ? 1 : 0;
        }
      }
    },
    methods: {
      goback: function () {
        this.$router.go(-1)
      },
      openForm: function () {
        const me = this
        me.brand = Object.assign(me.brand, me.defaultData)
        setTimeout(function () {
          me.restForm()
        }, 100)
      },
      submitAndMore: function () {
        this.submitForm(false)
      },
      submitAndClose: function () {
        this.submitForm(true)
      },
      submitForm: function (goback) {
        const me = this
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (me.brand.files.length > 0) {
              me.brand.logo = me.brand.files[0].url
            }
            AdminService.brand(me.brand).then(function (result) {
              if (result != null) {
                const data = result.datas[0]
                me.$message.success(me.model == 1 ? '创建' : '保存' + '品牌:' + data.name + '成功.')
                if (goback) {
                  setTimeout(function () {
                    me.$router.go(-1)
                  }, 500)
                } else {
                  me.restForm()
                }
              } else {
                me.$message.warning(me.model == 1 ? '创建' : '保存' + '失败!')
              }
            })
          } else {
            me.$message.warning('请正确填写信息!')
            return false
          }
        })
      },
      restForm: function () {
        this.$refs['form'].resetFields()
      }
    },
    mounted: function () {
      const id = this.$route.params.id
      if (id == undefined || id == null) {
        this.model = 1
        this.title = "添加品牌";
      } else {
        this.model = 2
        this.title = "编辑品牌";
        AdminService.brandById(id).then(ds => {
          if (ds != null && ds.datas.length > 0) {
            const tmp = ds.datas[0]
            if (tmp.logo != null && tmp.logo.length > 0) {
              tmp.files = [tmp.logo]
            } else {
              tmp.files = []
            }
            this.brand = tmp
          }
        })
      }
    }
  }
</script>
